﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - HBar / VBar Sparkline</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 2 });
            initSpread(spread);
        });

        function initSpread(spread) {
            spread.newTabVisible(false);
            this.initHorizontalSparkline(spread.sheets[0], "Horizontal");
            this.initVerticalSparkline(spread.sheets[1], "Vertical");
        };

        function initHorizontalSparkline(sheet, name) {
            sheet.isPaintSuspended(true);

            sheet.setName(name);
            sheet.addSpan(0, 0, 1, 3);
            sheet.getCell(0, 0).value("SPRINT 4").font("20px 'Comic Sans MS'").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
            sheet.getCells(1, 0, 1, 2).foreColor("white").backColor("#C0504D").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
            
            sheet.setValue(1, 0, "Name");
            sheet.setValue(1, 1, "Progress");
            sheet.setValue(1, 2, "Diagram");
            sheet.setValue(2, 0, "Employee 1");
            sheet.setValue(2, 1, 0.7);
            sheet.setValue(3, 0, "Employee 2");
            sheet.setValue(3, 1, 0.1);
            sheet.setValue(4, 0, "Employee 3");
            sheet.setValue(4, 1, 0.3);
            sheet.setValue(5, 0, "Employee 4");
            sheet.setValue(5, 1, 1.1);
            sheet.setValue(6, 0, "Employee 5");
            sheet.setValue(6, 1, 0.5);

            sheet.setFormula(2, 2, getFormula("B3"));
            sheet.setFormula(3, 2, getFormula("B4"));
            sheet.setFormula(4, 2, getFormula("B5"));
            sheet.setFormula(5, 2, getFormula("B6"));
            sheet.setFormula(6, 2, getFormula("B7"));

            sheet.setRowHeight(0, 40);
            for (var i = 1; i < 7; i++) {
                sheet.setRowHeight(i, 30);
            }
            sheet.setColumnWidth(0, 100);
            sheet.setColumnWidth(1, 100);
            sheet.setColumnWidth(2, 300);

            sheet.isPaintSuspended(false);
        }

        function getFormula(range) {
            return "IF(" + range + ">=0.8,HBARSPARKLINE(" + range + ",\"green\"), " +
                "IF(" + range + ">=0.6,HBARSPARKLINE(" + range + ",\"blue\"), " +
                "IF(" + range + ">=0.4,HBARSPARKLINE(" + range + ",\"yellow\"), " +
                "IF(" + range + ">=0.2,HBARSPARKLINE(" + range + ",\"orange\"), " +
                "IF(" + range + ">=0,HBARSPARKLINE(" + range + ",\"red\"), HBARSPARKLINE(" + range + ",\"red\") " + ")))))";
        }

        function getVBarFormula(row) {
            return "=IF((C5:N5>0)=(ROW(C29:N30)=ROW($C$29)),VBARSPARKLINE((C5:N5)/max(abs(C5:N5)),C4:N4),\"\")".replace(/(C|N)5/g, "$1" + row);
        }

        function initVerticalSparkline(sheet, name) {
            sheet.isPaintSuspended(true);

            sheet.setName(name);
            sheet.addSpan(0, 0, 2, 15);
            sheet.getCell(0, 0).value("The Temperature Variation").font("20px 'Comic Sans MS'").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
            sheet.getCells(2, 0, 2, 14).foreColor("white").backColor("#C0504D").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
            sheet.setArray(2, 0, [["City", "", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]]);

            sheet.setColumnWidth(0, 120);
            for (var j = 1; j < 14; j++) {
                sheet.setColumnWidth(j, 40);
            }
            
            var colors = ["#0099FF", "#33FFFF", "#9E0142", "#D53E4F", "#F46D43", "#FDAE61", "#FEE08B", "#E6F598", "#ABDDA4", "#66C2A5", "#3288BD", "#5E4FA2"];
            sheet.setArray(3, 2, [colors]);
            sheet.setRowVisible(3, false);

            var datas = [
                ["Austin", "", 5, 7, 11, 15, 19, 22, 24, 24, 21, 16, 10, 6],
                ["Buffalo", "", -8, -7, -3, 3, 9, 14, 17, 16, 12, 6, 1, -4],
                ["Chicago", "", -9, -7, -2, 4, 9, 15, 18, 17, 12, 6, 0, -6],
                ["Denver", "", -8, -7, -3, 1, 7, 12, 15, 14, 9, 2, -4, -9],
                ["Houston", "", 6, 8, 11, 15, 20, 23, 24, 24, 21, 16, 11, 7],
                ["Las Vegas", "", 4, 6, 10, 13, 19, 24, 27, 26, 22, 15, 8, 4],
                ["Miami", "", 16, 17, 18, 20, 23, 24, 25, 25, 25, 23, 20, 17],
                ["Minneapolis", "", -14, -11, -4, 3, 9, 15, 18, 17, 11, 4, -3, -11]
            ];

            for (var i = 0; i < datas.length; i++) {
                var row = 4 + 3 * i;
                sheet.setArray(row, 0, [datas[i]]);
                sheet.addSpan(row, 0, 3, 2);
                sheet.setArrayFormula(row + 1, 2, 2, 12, getVBarFormula(row + 1));
                sheet.setRowHeight(row + 1, 30);
                sheet.setRowHeight(row + 2, 30);
            }

            sheet.isPaintSuspended(false);
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 620px; border: 1px solid gray;"></div>
    </div>
</body>
</html>